<template>
    <custom-page-box>
        <div class='personnel-manage-update-container'>
            <p class='title'>{{ !$route.query.id ? '新增' : '编辑' }}成员信息</p>
            <div class='form'>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col='{span:4}' :wrapper-col='{span:18}'>
                    <a-form-model-item label='姓名' prop='name'>
                        <a-input v-model='form.name'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label='手机号' prop='tel'>
                        <a-input v-model='form.tel'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label='部门' prop='department'>
                        <a-cascader
                            v-model='form.department'
                            :options="departmentList"
                            change-on-select
                            :field-names="{ label: 'name', value: 'id', children: 'children' }"
                            placeholder="请选择部门"
                            @change='changeDepartment'
                        />
                    </a-form-model-item>
                    <a-form-model-item label='职位' prop='position'>
                        <a-input v-model='form.position'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label='登录密码' prop='password' v-if='!$route.query.id'>
                        <a-input-password v-model='form.password' placeholder='请输入6~12位数字字母组合'></a-input-password>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class='btn'>
                <a-button @click='goBack'>取消</a-button>
                <a-button type='primary' @click='submit'>保存</a-button>
                <a-button type='primary' @click="submit('next')" v-if='!$route.query.id'>保存并继续添加</a-button>
            </div>
        </div>
    </custom-page-box>
</template>

<script>
export default {
    name: 'PersonnelManageUpdate',
    data () {
        const checkPassword = (value) => {
            const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
            return reg.test(value)
        }
        const customCheckPassword = (rule, value, callback) => {
            if (!checkPassword(value)) {
                callback(new Error('请设置6~12位数字字母组合新密码'))
            } else {
                callback()
            }
        }
        const checkTel = (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(value))) {
                callback(new Error('请输入正确的联系电话'))
            } else {
                callback()
            }
        }
        return {
            form: {
                name: '',
                tel: '',
                department: [],
                position: '',
                password: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { max: 10, message: '最多可输入10个字符', trigger: 'change' }
                ],
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkTel, trigger: 'change' }
                ],
                department: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                position: [
                    { required: true, message: '请输入职位', trigger: 'blur' },
                    { max: 30, message: '最多可输入30个字符', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: customCheckPassword, trigger: 'change' }
                ]
            },
            departmentList: []
        }
    },
    created () {
        if (this.$route.query.id) {
            this.form.position = this.$route.query.position
            this.form.tel = this.$route.query.tel
            this.form.name = this.$route.query.name
        }
        this.getTree()
    },
    methods: {
        submit (type) {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { name, tel, department, position, password } = this.form
                    const url = this.$route.query.id ? 'personnel/updatePerson' : 'personnel/addPerson'
                    const res = await this.$ApiServer[url]({
                        id: this.$route.query.id,
                        name,
                        departmentId: department[department.length - 1],
                        username: tel,
                        password: password || undefined,
                        tel,
                        position
                    })
                    if (res.code === 200) {
                        if (this.$route.query.id === this.$store.state.user.userInfo.id) {
                            this.$store.dispatch('user/setUserInfo', {
                                ...this.$store.state.user.userInfo,
                                name
                            })
                        }
                        this.$message.success(res.message)
                        if (type === 'next') {
                            const departmentId = this.form.department
                            this.$refs.ruleForm.resetFields()
                            this.form.department = departmentId
                        } else {
                            this.goBack()
                        }
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        },
        async getTree () {
            const res = await this.$ApiServer['personnel/getTree']()
            if (res.code === 200) {
                const add = (list) => {
                    list.forEach((item) => {
                        item.scopedSlots = { title: 'custom' }
                        if (item.children && item.children.length) {
                            item.children = add(item.children)
                        }
                    })
                    return list
                }
                this.departmentList = add(res.data)
                const departmentId = this.$route.query.departmentId
                if (departmentId) {
                    let one, tow, three
                    const list = this.departmentList
                    for (let i = 0; i < list.length; i++) {
                        one = list[i].id
                        if (list[i].id === departmentId) {
                            break
                        } else if (list[i].children) {
                            const list2 = list[i].children
                            let flag1 = true
                            for (let j = 0; j < list2.length; j++) {
                                tow = list2[j].id
                                if (list2[j].id === departmentId) {
                                    flag1 = false
                                    break
                                } else if (list2[j].children) {
                                    const list3 = list2[j].children
                                    let flag2 = true
                                    for (let q = 0; q < list3.length; q++) {
                                        three = list3[q].id
                                        if (list3[q].id === departmentId) {
                                            flag2 = false
                                            break
                                        }
                                    }
                                    if (!flag2) {
                                        flag1 = false
                                        break
                                    }
                                }
                            }
                            if (!flag1) break
                        }
                    }
                    this.form.department = [one, tow, three].filter(item => item)
                }
            }
        },
        changeDepartment (value) {
            this.form.department = value
        },
        goBack () {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang='less'>
.personnel-manage-update-container {
    background: #fff;
    height: 100%;
    padding-top: 10px;
    border-radius: 6px;
    .title {
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      color: #2A2A2A;
      padding-left: 20px;
      border-bottom: 1px solid #F3F3F3;
      &:before{
        content: '';
        width: 2px;
        height: 12px;
        background-color: @primary-color;
        display: block;
        margin-right: 6px;
      }
    }
    .btn {
        margin-top: 20px;
        padding-left: 185px;
        button {
            margin-right: 10px;
        }
        button:nth-child(1){
          border: 1px solid @primary-color;
          color: @primary-color;
          width: 90px;
        }
        button:nth-child(2){
          border: 1px solid @primary-color;
          color: #fff;
          width: 90px;
        }
        button:nth-child(3){
          border: 1px solid @primary-color;
          color: #fff;
          width: 130px;
        }
    }
    .form {
        width: 700px;
        margin-top: 40px;
      margin-left: 70px;
    }
}
</style>
